<template>

  <el-card class="mt-20 mr-20" shadow="never">
    <el-form :disabled="permissionDisabled()" :model="dialogForm" :rules="rules" ref="FormRef" label-position="top" class="goodForm">
      <el-form-item>
        <template #label>
          <div class="form-label">
            <span class="content-title">{{ $t('pageStr.FlashnewfirmwareimageStr') }} </span>
            <span> ( {{ $t('pageStr.UploadasysupgradecompatibleStr') }} )</span>
          </div>
        </template>
        <div class="flex flex-center">
          <div>{{ $t('pageStr.keepSetStr') }}</div>
          <el-checkbox v-model="dialogForm.checked" class="ml-20"/>
        </div>
      </el-form-item>
      <el-form-item>
        <template #label>
          <div class="form-label">
            <span>{{ $t('pageStr.imageStr') }}</span>
          </div>
        </template>
        <file-upload is-resumable accept=".ky" :is-checked="dialogForm.checked" :btn-label="$t('tabsStr.flashImageStr')" @uploadSuccess="onUploaded"/>
      </el-form-item>
    </el-form>
  </el-card>

</template>

<script setup>
import {reactive, ref} from 'vue'
import FileUpload from '@/components/Upload/index.vue'
import {ElMessage} from "element-plus";
import {permissionDisabled} from "@/utils";

const FormRef = ref(null)
const dialogForm = ref({
  checked: true
})
const rules = reactive({})

/**
 * 上传成功后的事件回调
 */
function onUploaded(data) {
  console.log('上传完成的回调', data)
  // if (data.updateInfo == -1) {
  //   ElMessage.error(t('errorTip'))
  // } else {
  //   ElMessage.error(t('successTip'))
  // }
}
</script>

<style scoped>
.form-label span:nth-child(2) {
  color: #717289;
}

.form-label {
  font-size: 14px;
  color: #161940;
}

.file {
  width: 480px;
  height: 80px;
  background-color: #F5F6FA;
  border: #A0A2B9 1px dashed;
  border-radius: 4px;
}

.content-title {
  /*padding-left: 10px;*/
  padding-bottom: 15px;
  font-family: "Microsoft YaHei";
  /*margin-top: 10px;*/
  font-size: 17px;
  color: #161940;
  font-weight: bold;
}
</style>